<template>
    <div class="luorderNo-box">
        <nav-com title="录入单号" :showView='showView' @back="backHandler()"></nav-com>
         <div class="group_add" style="hieght:auto;">
             <div class='pay_title'>订单号来源</div>
             <ul class="pay_list">
                 <li @click="paySel(index)" v-for="(v,index) in orderSourceArray" :key="index">
                     <div class="pay_icon">
                         <img :src='v.icon' />
                         <p>{{v.name}}</p>
                     </div>
                     <div class="pay_sel">
                         <img  :src="selFlag == index?seled:sel" />
                     </div>
                 </li>
             </ul>
         </div>
		 <div class="group_add" style="hieght:auto;">
            <van-cell-group inset>
                <van-field
                    v-model="orderNo"
                    rows="1"
                    autosize
                    label=""
                    type="textarea"
                    placeholder="粘贴订单编号"
                />
                </van-cell-group>
            <div class="oper">
                <div class="picShibie">
                    <img src='@/assets/p1.png' class="shibieImg"/>
                      图片识别
                </div>
                <div class="cpShibie">粘贴并识别</div>
            </div>
		 </div>
		 <div class="card3_bottom">
		     <div  class="card3_display">
		         <van-button :loading='loadingFlag'  @click='verify()' loading-text='核销中...'  class="card3_btn">确认</van-button>
		     </div>
		 </div>
    </div>
</template>
<script>
import navCom from '@/component/nav'
import sel from '@/assets/sel.png'
import seled from '@/assets/seled.png'
import check from "@/assets/check-circle@2x.png"
import {Toast} from "vant";
import moment from "moment";
import { Field, CellGroup } from 'vant';
import {
    orderWriteoff,getFttuserUserId2
  } from "@/api/api";
export default {
    name:'add',
    components:{
        navCom
    },
    data() {
        return {
            orderNo:"",
			showView:true,
			orderSourceArray:[{
				id:1,
				name:'京东',
				icon:require("@/assets/pay/jd-icon.png")
			},
            {
				id:2,
				name:'淘宝',
				icon:require("@/assets/pay/tb-icon.png")
			},{
				id:3,
				name:'拼多多',
				icon:require("@/assets/pay/pdd-icon.png")
			}],
			selFlag:0,
			sel:sel,
			seled:seled,
			loadingFlag:false,
            userInfo:{},
            status:"1"
        }
    },
    created(){
    },
    mounted(){
        // {goods_id:this.details.id,total_price:this.details.price,address_id:this.addressDetail.id}
		console.log(this.$route.params.goods_id)
        console.log(this.$route.params.total_price)
        console.log(this.$route.params.address_id)
        this.init();
    },
    methods:{
        init(){
            getFttuserUserId2().then(res=>{
                console.log("getFttuserUserId2",res);
                if(res.data.code == 1){
                    this.userInfo=res.data.data
                }
        })     
        },
        //返回
        backHandler(){
            this.$router.go(-1)
        },
		verify(){
            if(this.order_no=""){
                this.$dialog.alert({
                    message: "未填写订单编号",
                });
              return;
            }
            orderWriteoff({
                order_no:this.orderNo,
                status:this.status,
                verify_name:this.userInfo.username,
                verify_order:"已完成",
                goods_id:this.$route.params.goods_id,
                address_id:this.$route.params.address_id,
                total_price:this.$route.params.total_price,
            }).then(res=>{
                console.log("orderWriteoff",res);
                if(res.data.code == 1){
                    this.$dialog
                    .alert({
                      message: res.data.msg,
                    }).then((res) => {
                      this.$router.go(-1);
                    });
                }else{
                    this.$dialog
                    .alert({
                      message: res.data.msg,
                    })
                }
            })
        },
		//选择
		paySel(val){
		  this.selFlag=val
          this.status=this.orderSourceArray[val].id		
        }
    }
}
</script>
<style scoped>
.luorderNo-box{height: 100vh;background: #f5f5f5;}
.group_add{width:94.66vw; margin-top:2.6vw; margin-left:2.6vw; border-radius: 2.6vw; background:#fff;}
.card3_bottom { position:fixed; bottom:0; left:0; right:0; height:18.66vw; background: #fff;; height:18.66vw;}
.card3_display {margin:3.3vw; width:auto;}
.card3_bottom .card3_btn {width:94.66vw;;  height:12vw; line-height:12vw; font-size:4vw; background:#D62F34; border-radius: 6vw; text-align:center; color:#fff; }
.pay_title {margin-left:3vw; padding-top:2.6vw; font-size:4vw;}
.pay_list {margin-top:4vw;}
.pay_list li {display:flex; justify-content: space-between;align-items: center;}
.pay_icon {display:flex; height:12vw;align-items: center;}
.pay_icon img {width:5.3vw; height:5.3vw; margin-left:2.6vw;}
.pay_icon p {padding-left:2.6vw;}
.pay_sel img {width:4vw; height:4vw; margin-right:2.6vw;}
.shibieImg{
    width:4vw; height:3.3vw; margin-right:1vw;
}
.oper{
    display: flex;
    justify-content: space-between;
    padding: 10px 20px;
}
.picShibie{
    width: 85px;
    height: 25px;
    border: 1px solid #9F9B99;
    border-radius: 25px;
    font-size: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.cpShibie{
    width: 74px;
    height: 25px;
    background: #FD501B;
    border-radius: 25px;
    color: white;
    font-size: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}
</style>
